<template>
	<transition name="fade" @after-leave="handleAfterLeave">
		<div class="message" v-show="visible">

			<div class="dialog">
				<div class="content">{{content || "请填写提示内容！"}}</div>
				<div class="button-ground">
					<button class="button" @click="cancel" :style="{color:cancelColor}" v-if="showCancel">
						<p class="cancel">{{cancelText || "取消"}}</p>
					</button>

					<button class="button" @click="confirm" :style="{color:confirmColor}">
						<p class="confirm">{{confirmText || "确定"}}</p>
					</button>
				</div>
			</div>

		</div>
	</transition>
</template>

<script>
	export default {
		name: 'message',
		data() {
			return {
				visible: false, //显示与隐藏
				showCancel: true, //是否显示取消按钮
				title: null, //提示的标题
				content: null, //提示的内容
				cancelText: null, //取消按钮的文字
				cancelColor: null, //取消按钮的文字颜色
				confirmText: null, //确认按钮的文字
				confirmColor: null, //确认按钮的文字颜色
			}
		},
		methods: {
			confirm() {
				this.close('confirm');
			},
			cancel() {
				this.close('cancel');
			},
			close(action) {
				this.visible = false;
				if (typeof this.callback === 'function') {
					//使用callback接收
					this.callback(action);
					this.resolve(action); //改promise的pending状态
				} else {
					//使用then和catch接收
					if (action === 'confirm') {
						this.resolve(action);
					} else if (action === 'cancel') {
						this.reject(action);
					}
				}
			},
			handleAfterLeave() {
				document.body.removeChild(this.$el); //从body中移除dom,将v-show换成v-if也能移除dom
				this.$destroy(true); //销毁组件
			}
		},
	}
</script>
<style>
	.message {
		user-select: none;
		-webkit-user-select: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 111;
		background: rgba(0, 0, 0, 0.6);
		/* 修正颜色定义 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 对话框样式 */
	.dialog {
		width: 80vw;
		max-width: 600px;
		min-width: 300px;
		/* 新增最小宽度限制 */
		height: auto;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
		/* 调整阴影的透明度 */
		padding: 25px;
		margin-bottom: 60px;
		overflow-y: auto;
		/* 允许垂直滚动 */
		position: relative;
		/* 如果需要绝对定位的子元素 */
		transition: all 0.3s ease;
		/* 添加过渡效果 */
	}

	/* 内容样式 */
	.content {
		font-size: 36px;
		/* 使用rem或em */
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 2vw;
	}

	/* 按钮样式 */
	.button {
		width: 40vw;
		max-width: 200px;
		height: 5vh;
		line-height: 5vh;
		display: flex;
		justify-content: center;
		padding: 0 2vw;
		font-size: 1.5rem;
		border-radius: 50px;
		border: none;
		cursor: pointer;
		background-color: #f9e79f;
		/* 设置背景色为淡黄色 */
		color: #333;
		/* 设置文本颜色为深灰色 */
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
		/* 文本阴影，增加立体感 */
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		/* 盒子阴影，增加深度感 */
		transition: background-color 0.3s, box-shadow 0.3s;
		/* 平滑过渡效果 */

		/* 添加背景渐变 */
		background: linear-gradient(to right, #f9e79f, #ffc857);
		/* 从左到右的淡黄色到橙色的渐变 */
		color: white;
		/* 深灰色文本 */
		transition: background-color 0.3s, box-shadow 0.3s;
		outline: none;
		text-align: center;
		vertical-align: middle;
	}
	.button+.button {
		margin-left: 8vw;
	}
	.dialog .button-ground {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cancel{
		color: #333;
	}
	.confirm{
		color: #ff0000;
	}
</style>